<template>
  <view>
   <image src="../../image/bg.png" class="bgImg" />
    <view class="top-title" :style="{height:customBar+'px',paddingTop:statusBar+'px'}">
      <view class="top-title-back" @tap="goBack">
        <image src="../../image/back.png" />
      </view>
      <text class="top-title-t1">月租卡激活</text>
    </view>
    <view class="card-title">
      <text class="card-title-t1">月租卡</text>
    </view>
    <view class="card">
      <image src="../../image/cardbg.png" class="img" />
      <view class="card-right">
        <view class="rt-p1">
          <image src="../../image/car.png" class="rt-img1" />&nbsp;
          <text>{{cardInfos.carNo||'暂无车牌'}}</text>
        </view>
        <view class="rt-p2">{{cardInfos.park&&cardInfos.park.parkName||"暂无车场数据"}}</view>
        <view class="rt-p3">
          <text>有效期:{{cardInfos.startTime.substring(0, 10)}}-{{cardInfos.endTime.substring(0, 10)}}</text>
        </view>
      </view>
    </view>
    <view class="money">
      <view class="title">充值金额</view>
      <view>
        <text class="p1">{{cardInfos.amount/100}}</text>
      </view>
    </view>
    <view class="btn" @tap="goRecharge">支付{{cardInfos.amount/100}}元</view>
    <!--授权手机号-->
    <view v-if="!hasPhone" class="open-dialog">
      <image src="../../image/close.png" class="panel-box-close" @tap="hasPhone=true" />
      <view class="title text-center">提示</view>
      <view class="info">请获取手机号后，再激活</view>
      <button
        openType="getPhoneNumber"
        @GetPhoneNumber="onGetPhoneNumber"
        class="panel-box-btn"
      >获取手机号</button>
    </view>
    <view class="panel-bg" v-if="!hasPhone"></view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./activateCard.less";
import { setGlobalData, getGlobalData } from "../../globalData.js";

import bulterApi from "@souche2014/bulter-api";
import { request } from "../../util/axios.js";
const api = bulterApi({ partner: "IOParking" });
// pages/card/storeRecharge.js
export default {
  data() {
    return {
      mobile: "",
      openId: "",
      dialog1: false,
      hasPhone:true,
      apiBaseUrl: process.env.IOParking.API_HOST, //请求头
      id: 0,
      cardInfos:null,
      customBar:0,
      statusBar:0,
      amount: 0,
      isScan:false,//是否扫码进入
    };
  },
   mounted() {
    Taro.getSystemInfo({
      success: res => {
        this.statusBar = res.statusBarHeight; //状态栏高度
        let custom = Taro.getMenuButtonBoundingClientRect(); //菜单按钮
        this.customBar = custom.height + 8;
        console.log(this.statusBar, this.customBar);
      }
    });
  },
  onLoad: function(options) {
    console.log(options)
    var that=this
    if (options.cardId) {
      //体验开发版本扫码获得参数
      that.id = options.cardId ? options.cardId : "";
      that.isScan=false
    } else if (options.q) {
      //正式版扫码获得参数
      let qrUrl = decodeURIComponent(options.q);
      that.id = that.getQueryString(qrUrl, "cardId");
      this.isScan=true
    }
    if (!getGlobalData("openId")) {
      that.wx_login();
    } else {
      that.initData();
    }
  },
  methods: {
    initData() {
       request("/onlinepayment/getpayactiveorder?id="+this.id).then(res => {
        if (res.isSuccess) {
         this.cardInfos=res.data
        }
      });
    },
    goRecharge(e) {
      var that = this;
      // if (getGlobalData("mobile") == "" || !getGlobalData("mobile")) {
      //   that.hasPhone = false;
      //   return;
      // }
      var base = that.apiBaseUrl;
      Taro.showLoading({
        title: "加载中",
        mask: true
      });
      Taro.request({
        url: base + "/onlinepayment/payactive",
        data: {
          tokenId: that.cardInfos.tokenId,
          orderId: that.cardInfos.id,
          payMent: 3,//支付宝2,微信3
          mobile: getGlobalData("mobile") || "",
          openId: getGlobalData("openId"),
        },
        method: "POST",
        success(res) {
          Taro.hideLoading();
          console.log(res);
          if (res.data.isSuccess) {
            // var orderId = res.data.data.chargeOrderId
            that.wxPay(res.data.data.wxPayOrderParams);
          } else {
            Taro.showToast({
              title: res.data.message,
              icon: "none",
              duration: 1000,
              mask: true
            });
          }
        }
      });
    },
    wxPay(obj, orderId) {
      //微信支付
      var that = this;
      Taro.requestPayment({
        timeStamp: obj.timeStamp,
        nonceStr: obj.nonceStr,
        package: obj.package,
        signType: obj.signType,
        paySign: obj.paySign,
        success(res) {
          console.log("支付成功");
          Taro.navigateTo({
            url: "../openCard/paySuccess?isHome=1"
          });
        },
        fail(res) {
          console.log(res);
        }
      });
    },
    goBack() {
      if(this.isScan){
        api.openPage("home");
      }else{
        Taro.navigateBack({
          delta: 1
        });
      }
    },
    wx_login() {
      var that = this;
      api
        .getUserInfo({
          scope: "all"
        })
        .then(resp => {
          if (resp.success) {
            console.log("authCode is：", resp.data);
            if (resp.data == "mock") {
              setGlobalData("openId", "oRPxj5ZrsZGRuxTa-UrzEBeLuv-s");
              setGlobalData("mobile", "17761643218");
              that.getPlateList();
              that.getCardList();
              return;
            }
            that.getInfos(resp.data);
          } else {
            console.log("err is ", resp.message, "err code is ", resp.code);
          }
        });
    },
    getInfos(authCode) {
      var that = this;
      Taro.request({
        url: this.apiBaseUrl + "/weixin/souchegetuser?authCode=" + authCode,
        data: {},
        header: {
          "content-type": "application/json" // 默认值
        },
        method: "GET",
        success(res) {
          console.log("获取用户信息：", res.data);
          if (res.data.isSuccess) {
            var userOpenId = res.data.data.openId;
            setGlobalData("openId", userOpenId);
            setGlobalData("mobile", res.data.data.phoneNum);
            that.initData();
          }
        }
      });
    },
    //解析链接方法
    getQueryString(url, name) {
      var reg = new RegExp("(^|&|/?)" + name + "=([^&|/?]*)(&|/?|$)", "i");
      var r = url.substr(1).match(reg);
      if (r != null) {
        return r[2];
      }
      return null;
    }
  }
};
</script>
